<template>
	<view>
		<!-- 占位 -->
		<!-- 用户信息 -->
		<view class="user">
			<!-- 头像 -->
			<view class="left">
				<image :src="user.face" @tap="toSetting"></image>
			</view>
			<!-- 昵称,个性签名 -->
			<view class="right">
				<view class="username" @tap="toLogin">{{user.username}}</view>
				<view class="signature" @tap="toSetting">{{user.signature}}</view>
			</view>
			
		</view>
			<!-- 订单-余额 -->
		<view class="order">
			<view class="header" @tap="toOrderList(-1)">
				<view class="title">
					我的订单
				</view>
				<view class="more">
					全部订单
						<uni-icons type="arrowright" size="16"></uni-icons>
				</view>
			</view>
			<!-- 订单类型 -->
			<view class="list">
				<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)">
					<view class="img">
						<image :src="row.img" mode="widthFix" class="imgitem"></image>
					</view>
					<view class="text">{{row.text}}</view>
				</view>
			</view>
			</view>
		<!-- 工具栏 -->
		<view class="toolbar">
			<view class="title">更多工具</view>
			<view class="list">
				<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row.url)">
					<view class="img">
						<image :src="row.img"></image>
					</view>
					<view class="text">{{row.text}}</view>
				</view>
			</view>
		</view>
		<!-- 专属推荐 -->
		<view class="exclusive">
			专属推荐
		</view>
		<view class="product-list">
			<view class="product" v-for="product in productList" :key="product.goods_id" @tap="toGoods(product)">
				<view class="imgBox">
					<image mode="widthFix" :src="product.img"></image>
					<view class="tagBox">
						<view class="tags" :class="item.type == 'red' ? 'red' : item.type == 'yellow' ? 'yellow' : 'green'" v-for="(item, index) in product.tags" :key="index">
							{{ item.title }}
						</view>
					</view>
				</view>
				<view class="name">{{ product.name }}</view>
				<view class="info">
					<view class="price">{{ product.price }}</view>
					<view class="slogan">{{ product.slogan }}</view>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place-bottom"></view>
	</view>
</template>
<script>

	export default {
		data() {
			return {
				isfirst:true,
				//个人信息,
				user:{
					username:'马化腾',
					face:'/static/img/face.jpg',
					signature:'个人介绍：账号ID',
					integral:0,
					balance:0,
					envelope:0
				},
				// 订单类型
				orderList:[
					{text:'待付款',img:"/static/img/user/fukuan.png"},
					{text:'待收货',img:"/static/img/user/shouhuo.png"},
					{text:'待评价',img:"/static/img/user/pingjia.png"},
					{text:'退换货',img:"/static/img/user/tuihuo.png"}
				],
				// 工具栏列表
				mytoolbarList:[
					{url:'../../user/keep/keep',text:'我的收藏',img:'/static/img/user/point.png'},
					{url:'../../user/coupon/coupon',text:'优惠券',img:'/static/img/user/quan.png'}, 
					{url:'/pages/user/gifts/gifts',text:'新客豪礼',img:'/static/img/user/renw.png'},
					{url:'',text:'领红包',img:'/static/img/user/momey.png'},
					
					{url:'../../user/address/address',text:'收货地址',img:'/static/img/user/addr.png'},
					{url:'',text:'账户安全',img:'/static/img/user/security.png'},
					{url:'',text:'银行卡',img:'/static/img/user/bank.png'},
					{url:'/pages/live/live',text:'直播',img:'/static/img/user/choujiang.png'},
					// {text:'客服',img:'/static/img/user/kefu.png'},
					// {text:'签到',img:'/static/img/user/mingxi.png'}
					
				],
				// 专属推荐
				productList: [
					{
						goods_id: 0,
						img: '/static/img/goods/p1.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款',
						tags: [{ title: '满减', type: 'red' }, { title: 'HOT', type: 'yellow' }, { title: '新品', type: 'green' }]
					},
					{
						goods_id: 1,
						img: '/static/img/goods/p2.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款',
						tags: [{ title: 'HOT', type: 'yellow' }]
					},
					{
						goods_id: 2,
						img: '/static/img/goods/p3.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款',
						tags: [{ title: '新品', type: 'green' }]
					},
					{
						goods_id: 3,
						img: '/static/img/goods/p4.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 4,
						img: '/static/img/goods/p5.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款',
						tags: [{ title: '满减', type: 'red' }]
					},
					{
						goods_id: 5,
						img: '/static/img/goods/p6.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款',
						tags: [{ title: 'HOT', type: 'yellow' }]
					},
					{
						goods_id: 6,
						img: '/static/img/goods/p7.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 7,
						img: '/static/img/goods/p8.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款',
						tags: [{ title: '满减', type: 'red' }, { title: 'HOT', type: 'yellow' }]
					},
					{
						goods_id: 8,
						img: '/static/img/goods/p9.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 9,
						img: '/static/img/goods/p10.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款',
						tags: [{ title: 'HOT', type: 'yellow' }, { title: '新品', type: 'green' }]
					}
				],
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({ title: '触发上拉加载' });
			let len = this.productList.length;
			if (len >= 40) {
				this.loadingText = '到底了';
				return false;
			}
			// 演示,随机加入商品,生成环境请替换为ajax请求
			let end_goods_id = this.productList[len - 1].goods_id;
			for (let i = 1; i <= 10; i++) {
				let goods_id = end_goods_id + i;
				let p = {
					goods_id: goods_id,
					img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款'
				};
				this.productList.push(p);
			}
		},
		onReady(){
			//此处，演示,每次页面初次渲染都把登录状态重置
			uni.setStorage({
				key: 'UserInfo',
				data: false,
				success: function () {
				},
				fail:function(e){
				}
			});
		},
		onShow(){
			uni.getStorage({
				key: 'UserInfo',
				success: (res)=>{
					if(!res.data){
						if(this.isfirst){
							//this.toLogin();
						}
						return ;
					}
					this.user = res.data;
					console.log(this.user)
				},
				fail:(e)=>{
					//this.toLogin(); 
				}
			});
		},
		methods: {
			toOrderList(index){
				uni.setStorageSync('tbIndex',index);
				uni.navigateTo({url:'../../user/order_list/order_list?tbIndex='+index}) 
			},
			toSetting(){
				uni.navigateTo({
					url:'../../user/setting/setting'
				})
			},
			toLogin(){
				uni.showToast({title: '请登录',icon:"none"});
				uni.navigateTo({
					url:'../../login/login'
				})
				this.isfirst = false;
			},
			isLogin(){
				//实际应用中,用户登录状态应该用token等方法去维持登录状态.
				const value = uni.getStorageSync('UserInfo');
				if (value) {
					return true;
				}
				return false
			},
			toDeposit(){
				uni.navigateTo({
					url:'../../user/deposit/deposit'
				})
			},
			toPage(url){
				if(!url){
					uni.showToast({title: '模板未包含此页面',icon:"none"});return;
				}
				uni.navigateTo({
					url:url,
				})
			},
			//商品跳转
			toGoods(e) {
				uni.showToast({ title: '商品' + e.goods_id, icon: 'none' });
				uni.navigateTo({
					url: '../../goods/goods'
				});
			},
		}
	} 
</script>
<style lang="scss">
	page{position: relative;background-color: #fff;}
	.place-bottom{
		height: 20upx;
	}
	.user{
		width: 92%;
		padding: 40upx 4%;
		display: flex;
		align-items: center;
		// position: relative;
		background-color: #91683e;
		padding-bottom: 120upx;
		border-radius: 0 0 30upx 30upx;
		.left{
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			margin-right: 20upx;
			border: solid 1upx #fff;
			border-radius: 100%;
			image{
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
			
		}
		.right{
			width: 100%;
			.username{
				font-size: 36upx;
				color: #fff;
			}
			.signature{
				color: #eee;
				font-size: 28upx;
			}
		}
		}
	.order{
		width: 84%;
		margin: 30upx 4% 30upx 4%;
		margin-top: -100upx;
		padding: 20upx 4% 20upx 4%;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
		border-radius: 15upx;
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20upx;
			border-bottom: 1upx solid #eee;
			.title {
				font-size: 32upx;
			}
			.more {
				font-size: 26upx;
				color: #444;
				display: flex;
				align-items: center;
			}
		}
		.list{
			display: flex;
			padding: 15upx 0;
			.box{
				width: 25%;
				.img{
					width: 100%;
					display: flex;
					justify-content: center;
					padding: 10upx 0;
					.imgitem{
						width: 60upx;
					}
				}
				.text{
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #3d3d3d;
				}
			}
		}
	}
	.toolbar{
		width: 92%;
		margin: 0 4% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
		border-radius: 15upx;
		.title{
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			.box{
				width: 25%;
				margin-bottom: 30upx;
				.img{
					width: 23vw;
					height: 10.5vw;
					display: flex;
					justify-content: center;
					
					image{
						width: 9vw;
						height: 9vw;
					}
				}
				.text{
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
				}
			}
		}
	}
	.exclusive {
		padding: 20upx;
		padding-left: 30upx;
		padding-bottom: 0;
		font-size: 34upx;
	}
	.product-list {
		margin-top: 20upx;
		width: 92%;
		padding: 0 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product {
			width: 48%;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 0 15upx 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
			.imgBox {
				position: relative;
				image {
					width: 100%;
					border-radius: 20upx 20upx 0 0;
				}
				.tagBox {
					position: absolute;
					left: 2upx;
					bottom: 10upx;
					width: 100%;
					.tags {
						padding: 2upx 10upx;
						font-size: 24upx;
						margin-right: 10upx;
						border-radius: 5upx;
						color: #fff;
						display: inline-block;
						&.red {
							background-color: #d85f61;
						}
						&.yellow {
							background-color: #ffcc4a;
						}
						&.green {
							background-color: #6fd85f;
						}
					}
				}
			}

			.name {
				width: 92%;
				padding: 10upx 4%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 30upx;
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 92%;
				padding: 10upx 4% 10upx 4%;

				.price {
					color: #e65339;
					font-size: 30upx;
					font-weight: 600;
				}
				.slogan {
					color: #807c87;
					font-size: 24upx;
				}
			}
		}
	}

</style>
